<template>
  <div>
    <el-row class="w-el-row">
      <el-col :span="8" class="w-timmer" style="margin-right:10px">
        <div class="el-input-group el-input-group-prepend" style="width:100%">
          <div class="el-input-group__prepend">投产时间区间</div>
          <datePick ref="datePick" :tempTime="tempTime"></datePick>
        </div>
      </el-col>
      <el-col :span="7" style="margin-top:14px">
        <div class="el-input-group el-input-group-prepend" style="width:100%">
          <div class="el-input-group__prepend">部门</div>
          <el-select
            v-model="dept"
            placeholder="请选择"
            style="width:100%"
            size="mini"
            clearable
            multiple
            collapse-tags
            :filterable="true"
            reserve-keyword
            @change="changedept"
          >
            <el-option
              v-for="item in deptOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="7" style="margin-top:14px">
        <el-button
          class="el-button-query-mini"
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="searchDate"
        >查询</el-button>
      </el-col>
    </el-row>
    <div>
      <el-table
        border
        v-loading="laoding"
        :data="tableDate.slice((listQuery.currentPage-1)*listQuery.pageSize,(listQuery.currentPage-1)*listQuery.pageSize+listQuery.pageSize)"
        :size="'small'"
        row-key="nodeId"
        :height="tableHeight"
        :tree-props="{children:'childrens'}"
        style="width:100%;margin:20px 0"
      >
        <el-table-column prop="nodeName" label="研发部门" :show-overflow-tooltip="show"></el-table-column>
        <el-table-column prop="nodeId" label="投产故事总数" :show-overflow-tooltip="show"></el-table-column>
        <el-table-column prop="node" label="测试缺陷密度" :show-overflow-tooltip="show"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.currentPage"
        :page-sizes="pageSizes"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align:right"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import moment from "moment";
import datePick from "./datePick";
import tools from "@/utils/tools";

export default {
  components: {
    datePick,
  },
  data() {
    return {
      show: true,
      dept: [],
      olddept: [[]],
      deptOptions: [
        { id: "1", name: "张三" },
        { id: "2", name: "李四" },
      ],
      laoding: false,
      tempTime: "",
      tableDate: [
        {
          nodeName: "管理中心",
          nodeId: "1",
          node:'44.34',
          childrens: [
            {
              nodeName: "风险安全部",
              nodeId: "3633",
              childrens: [{ nodeName: "安全管理组", nodeId: "0015T" }],
            },
          ],
        },
        {
          nodeName: "研发中心",
          nodeId: "2",
          node:'18.32',
          childrens: [
            {
              nodeName: "风险安全部",
              nodeId: "3633",
              childrens: [{ nodeName: "安全管理组", nodeId: "0015T" }],
            },
          ],
        },
      ],
      pageSizes: [20, 40, 60, 80],
      total: 44,
      listQuery: {
        pageSize: 20,
        currentPage: 1,
      },
      tableHeight:
        (window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight) -
        this.$store.state.settings.tagViewHeight -
        100,
    };
  },
  mounted() {
    this.initSelect();
  },
  methods: {
    async initSelect() {
      this.$nextTick(() => {
        this.tempTime = moment(new Date()).format("YYYY-MM-DD");
        let [start, end] = tools.getDateLastMonth();
        console.log(this.$refs.datePick, "this.$refs.datePick");
        this.$refs.datePick.dateArray = [
          moment(new Date(start)).format("YYYY-MM-DD"),
          moment(new Date(end)).format("YYYY-MM-DD"),
        ];
      });
      // let res=await getdate()
    //   this.deptOptions = [];
      this.deptOptions.unshift({
        name: "全选",
        id: "ALL_SELECT",
      });
      this.dept = this.deptOptions.map((v) => {
        return v.id;
      });
      this.olddept[1] = this.dept;
    },
    changedept(val) {
      tools.allSelectFun(
        this,
        val,
        "olddept",
        "dept",
        "deptOptions",
        "ALL_SELECT",
        "id"
      );
    },
    changedept() {},
    searchDate() {},
    handleSizeChange(val) {
      this.listQuery.currentPage = val;
      //   this.tableListselect();
    },
    handleCurrentChange(val) {
      this.listQuery.pageSize = val;
      this.listQuery.currentPage = 1;
      //   this.tableListselect();
    },
  },
};
</script>
<style lang="scss" scoped>
.w-el-row {
  .w-timmer {
    ::v-deep .selectDateBox {
      .el-col-6 {
        width: 100%;
        .el-range-editor.el-input__inner {
          width: auto;
        }
      }
    }
  }
}
.w-select {
  ::v-deep .el-select__tags-text {
    max-width: 50px;
  }
}
</style>